.button {
  all: unset;
  cursor: pointer;

  &:focus-visible {
    outline: 2px solid var(--color-info-500);
  }
}

.primary {
  cursor: pointer;

  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  padding: 6px 28px;

  text-decoration: none;

  background: var(--color-accent-500);
  border: none;
  border-radius: 4px;
  box-shadow: 0 4px 18px 0 rgb(140 97 255 / 35%);

  &:focus-visible {
    outline: 2px solid var(--color-info-700);
  }

  &:hover {
    background: var(--color-accent-300);
    border-radius: 4px;
    box-shadow: 0 4px 18px 0 rgb(140 97 255 / 35%);
  }

  &:active {
    background: var(--color-accent-700);
    border-radius: 4px;
    box-shadow: 0 4px 18px 0 rgb(140 97 255 / 35%);
  }

  &:disabled {
    cursor: auto;
    background: var(--color-accent-900);
    border-radius: 4px;
    box-shadow: 0 4px 18px 0 rgb(140 97 255 / 35%);

    > svg {
      fill: var(--color-light-900);
    }

    :active {
      background: var(--color-accent-900);
    }
  }
}

.secondary {
  cursor: pointer;

  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  padding: 6px 28px;

  background: var(--color-dark-300);
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 10px 0 rgb(109 109 109 / 25%);

  &:focus-visible {
    outline: 2px solid var(--color-info-700);
  }

  &:hover {
    background: var(--color-dark-100);
    border-radius: 4px;
    box-shadow: 0 2px 10px 0 rgb(109 109 109 / 25%);
  }

  &:active {
    background: var(--color-dark-500);
    border-radius: 4px;
    box-shadow: 0 2px 10px 0 rgb(109 109 109 / 25%);
  }

  &:disabled {
    cursor: auto;

    color: var(--color-light-900);

    background: var(--color-dark-300);
    border-radius: 4px;
    box-shadow: 0 2px 10px 0 rgb(109 109 109 / 25%);

    > svg {
      fill: var(--color-light-900);
    }
  }
}

.link {
  display: inline-flex;
  gap: 10px;
  align-items: flex-start;
  text-decoration: none;
}

.fullWidth {
  width: 100%;
}
